import React, { Component } from 'react';
import { Select, Input, Button, Table, Switch, Modal } from 'antd';
import axios from "../../../../../../../util/axios"
import "./Seckill/index.css"

const { Option } = Select;
const { Search } = Input;

class Kill_goods extends Component {

    state = {
        xqdata: [],
        columns: [
            {
                title: 'ID',
                dataIndex: 'id',
                align: 'center',
                width: "70px"
            },
            {
                title: '配置',
                dataIndex: 'peizhi',
                align: 'center',
            },
            {
                title: '秒杀时段',
                dataIndex: 'mtime',
                align: 'center',
                width: "120px"
            },
            {
                title: '商品图片',
                dataIndex: 'img',
                render: url => <img src={url} alt="" style={{ width: "50px", height: "50px" }} />,
                className: 'shopImg',
                align: 'center',
                width: "90px"
            },
            {
                title: '活动标题',
                dataIndex: 'title',
                align: 'center',
            },
            {
                title: '活动简介',
                dataIndex: 'huojian',
                align: 'center',
                width: "90px"
            },
            {
                title: '原价',
                dataIndex: 'yjia',
                align: 'center',
                width: "70px"
            },
            {
                title: '秒杀价',
                dataIndex: 'mjia',
                align: 'center',
                width: "80px"
            },
            {
                title: '限量',
                dataIndex: 'xianl',
                align: 'center',
                width: "70px"
            },
            {
                title: '限量剩余',
                dataIndex: 'xianls',
                align: 'center',
                width: "70px"
            },
            {
                title: '秒杀状态',
                dataIndex: 'mzhuang',
                align: 'center',
                width: "90px"
            },
            {
                title: '状态',
                dataIndex: 'zhuang',
                render: (zhuang) => <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked={zhuang === 'false' ? false : true} />,
                align: 'center',
            },
            {
                title: '创建时间',
                dataIndex: 'time',
                align: 'center',
            },
            {
                title: '操作',
                align: 'center',
                render: (item) => <div style={{ display: "flex" }}>
                    <Button type="primary" style={{ margin: "0 5px" }} onClick={() => { this.handleEdit(item) }}>编辑</Button>
                    <Button type="primary" danger onClick={() => { this.handleDel(item.id) }}>删除</Button>
                </div>
            },
        ],
        isModalVisible: false,
        itemObj: {
            id: '',
            peizhi: '',
            mtime: '',
            img: '',
            title: '',
            huojian: '',
            yjia: '',
            mjia: '',
            xianl: '',
            xianls: '',
            mzhuang: '',
            zhuang: '',
            time: ''
        }
    }

    componentDidMount() {
        this.getSeckillData()
    }

    getSeckillData() { //获取数据
        axios.get('/Secondskill').then(res => {
            console.log(res);
            this.setState({
                xqdata: res.data.data
            })
        })
    }
    handleEdit = (item) => {//编辑
        this.setState({
            isModalVisible: !this.state.isModalVisible,
            itemObj: item
        })
    }
    handleOk = () => {//确定按钮
        axios.get('/Secondsupdata', {
            params: {
                id: this.state.itemObj.id,
                peizhi: this.state.itemObj.peizhi,
                mtime: this.state.itemObj.mtime,
                img: this.state.itemObj.iimgd,
                title: this.state.itemObj.title,
                huojian: this.state.itemObj.huojian,
                yjia: this.state.itemObj.yjia,
                mjia: this.state.itemObj.mjia,
                xianl: this.state.itemObj.xianl,
                xianls: this.state.itemObj.xianls,
                mzhuang: this.state.itemObj.mzhuang,
                zhuang: this.state.itemObj.zhuang,
                time: this.state.itemObj.time
            }
        }).then(res => {
            this.state.xqdata = res.data.data
            this.getSeckillData()
        })
        this.setState({
            ...this.state.itemObj,
            isModalVisible: !this.state.isModalVisible,
            itemObj: {
                id: '',
                peizhi: '',
                mtime: '',
                img: '',
                title: '',
                huojian: '',
                yjia: '',
                mjia: '',
                xianl: '',
                xianls: '',
                mzhuang: '',
                zhuang: '',
                time: ''
            }
        })
    }
    handleCancel=()=>{//取消按钮
        this.setState({
            ...this.state.itemObj,
            isModalVisible: !this.state.isModalVisible,
            itemObj: {
                id: '',
                peizhi: '',
                mtime: '',
                img: '',
                title: '',
                huojian: '',
                yjia: '',
                mjia: '',
                xianl: '',
                xianls: '',
                mzhuang: '',
                zhuang: '',
                time: ''
            }
        })
    }
    onSearch = (value) => { //模糊搜索
        axios.get('/Seckillsearch', { params: { peizhi: value } }).then(res => {
            console.log(res)
            this.setState({
                xqdata: res.data.data
            })
        })
    }

    handleChange = (value) => {//筛选
        console.log(value);
        axios.get('/Seckillsearch', { params: { sou: value } }).then(res => {
            console.log(res)
            this.setState({
                xqdata: res.data.data
            })
        })
    }

    handleDel = (key) => { //删除
        axios.get('/Seckilldetile', { params: { id: key } }).then(res => {
            console.log(res);
            this.setState({
                xqdata: res.data.data
            })
        })
        this.getSeckillData()
    }
    PeizhiChange = (e) => {
        this.setState({
            itemObj: {
                ...this.state.itemObj,
                peizhi: e.target.peizhi
            }
        })
    }
    MtimeChange = (e) => {
        this.setState({
            itemObj: {
                ...this.state.itemObj,
                mtime: e.target.mtime
            }
        })
    }
    TitleChange = (e) => {
        this.setState({
            itemObj: {
                ...this.state.itemObj,
                title: e.target.title
            }
        })
    }
    HuojianChange = (e) => {
        this.setState({
            itemObj: {
                ...this.state.itemObj,
                huojian: e.target.huojian
            }
        })
    }
    YjiaChange = (e) => {
        this.setState({
            itemObj: {
                ...this.state.itemObj,
                yjia: e.target.yjia
            }
        })
    }
    MjiaChange = (e) => {
        this.setState({
            itemObj: {
                ...this.state.itemObj,
                mjia: e.target.mjia
            }
        })
    }
    XianlChange = (e) => {
        this.setState({
            itemObj: {
                ...this.state.itemObj,
                xianl: e.target.xianl
            }
        })
    }
    XianlsChange = (e) => {
        this.setState({
            itemObj: {
                ...this.state.itemObj,
                xianls: e.target.xianls
            }
        })
    }
    MzhuangChange = (e) => {
        this.setState({
            itemObj: {
                ...this.state.itemObj,
                mzhuang: e.target.mzhuang
            }
        })
    }
    ZhuangChange = (e) => {
        this.setState({
            itemObj: {
                ...this.state.itemObj,
                zhuang: e.target.zhuang
            }
        })
    }
    TimeChange = (e) => {
        this.setState({
            itemObj: {
                ...this.state.itemObj,
                time: e.target.time
            }
        })
    }
    render() {
        let { xqdata, columns, isModalVisible, itemObj } = this.state
        return (
            <div className="seckill">
                <div className="searchTop">
                    <div className="select">
                        <span>是否显示：</span>
                        <Select defaultValue="请选择" style={{ width: 200 }} onChange={this.handleChange}>
                            <Option value="开启">开启</Option>
                            <Option value="关闭">关闭</Option>
                        </Select>
                    </div>
                    <div className="search">
                        <span>商品搜索：</span>
                        <Search placeholder="请输入商品名称" onSearch={this.onSearch} style={{ width: 260 }} />
                    </div>
                </div>
                <div className="tab">
                    <Table
                        columns={columns}
                        dataSource={xqdata}
                        bordered
                        rowKey='id'
                        scroll={{ y: 540 }}
                    />
                </div>
                <Modal title="编辑" visible={isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel} cancelText={'取消'} okText={'确定'}>
                    <li>配置：<input type="text" value={itemObj.peizhi} onChange={this.PeizhiChange} /></li>
                    <li>秒杀时段：<input type="text" value={itemObj.mtime} onChange={this.MtimeChange} /></li>
                    <li>活动标题：<input type="text" value={itemObj.title} onChange={this.TitleChange} /></li>
                    <li>活动简介：<input type="text" value={itemObj.huojian} onChange={this.HuojianChange} /></li>
                    <li>原价：<input type="text" value={itemObj.yjia} onChange={this.YjiaChange} /></li>
                    <li>秒杀价：<input type="text" value={itemObj.mjia} onChange={this.MjiaChange} /></li>
                    <li>限量：<input type="text" value={itemObj.xianl} onChange={this.XianlChange} /></li>
                    <li>限量剩余：<input type="text" value={itemObj.xianls} onChange={this.XianlsChange} /></li>
                    <li>秒杀状态：<input type="text" value={itemObj.mzhuang} onChange={this.MzhuangChange} /></li>
                    <li>状态：<input type="text" value={itemObj.zhuang} onChange={this.ZhuangChange} /></li>
                    <li>创建时间：<input type="text" value={itemObj.time} onChange={this.TimeChange} /></li>
                </Modal>
            </div>
        );
    }
}

export default Kill_goods;
